<!-- 购物车 -->
<template>
	<view class="page_box">
		<block v-if="isHas==3">
			<bossNav :inviteInfo="inviteInfo"></bossNav>
      <view class="boss-top-con">
        <view class="b-c-cell">
          <view class="b-c-item">
            <view class="c-i-o">上班{{ inviteInfo.beginTime }}</view>
            <view class="c-i-b">
              <block v-if="hasDayRecord==1">
                <img src="/static/images/boss/icon_b_finish.png" alt="">
                <view>{{ nowRecordInfo.length>0?nowRecordInfo[0].begin:'' }}已打卡</view>
              </block>
              <block v-else>
                <view class="c-i-b">
                  <view>未打卡</view>
                </view>
              </block>
            </view>
          </view>
          <view class="b-c-item">
            <view class="c-i-o">下班{{ inviteInfo.endTime }}</view>
            <view class="c-i-b">
              <block v-if="hasDayRecord==1&&nowRecordInfo.length>0&&nowRecordInfo[0].end">
                <img src="/static/images/boss/icon_b_finish.png" alt="">
                <view >{{ nowRecordInfo.length>0?nowRecordInfo[0].end:'' }}已打卡</view>
              </block>
              <view v-else>未打卡</view>
            </view>
          </view>
        </view>
        <view class="b-c-sel">
          <view @tap="changePoint">{{ pointList[pointIndex] }}--{{ dkway==1?'定位':dkway==2?'wifi打卡':'拍照打卡' }}</view>
          <img @tap="changePoint" src="/static/images/boss/icon_b_arrow_down.png" alt="">
        </view>
        <view class="b-c-clock">
          <!-- <camera v-if="dkway==0"></camera> -->
          <!-- <position v-if="dkway==1" :dkState="dkState" :inviteInfo="inviteInfo"></position> -->
          <!-- <view class="clock-in-box"> -->
            <!-- 打卡成功 -->
            <!-- <view v-if="dkState==4"> -->
              <!-- <img src="/static/images/boss/icon_b_dk.png" alt=""> -->
            <!-- </view> -->
            <!-- 待打卡 -->
            <!-- <view v-if="dkState==1" @tap="handleClockIn()"> -->
              <!-- <img src="/static/images/boss/icon_b_face.png" alt=""> -->
              <!--  :style="dkway==3?'margin:0':'margin:29px auto 2px'" -->
              <!-- <view class="c-i-b-t" style="margin:29px auto 2px">{{ sbxb }}</view> -->
              <!-- <view class="c-i-b-b">22</view> -->
            <!-- </view> -->
          <!-- </view> -->
          <!-- <wifi v-if="dkway==2"></wifi> -->
          <!-- 打卡失败 -->
          <!-- <view v-if="dkway==4" class="dksb"> -->
            <!-- <img class="img-dksb" src="/static/images/boss/icon_sb_dk.png" alt=""> -->
            <!-- <view class="p-sb"> -->
              <!-- <img src="/static/images/boss/icon_b_location_no.png" alt=""> -->
              <!-- <view>打卡失败</view> -->
            <!-- </view> -->
          <!-- </view> -->
          <!-- 打卡成功 -->
          <!-- <view class="dkcg"> -->
            <!-- <view class="box-cg"> -->
              <!-- <view class="inline-cg"> -->
                <!-- <img src="/static/images/boss/icon_b_dkcg.png" alt=""> -->
              <!-- </view> -->
            <!-- </view> -->
            <!-- <view class="p-cg"> -->
              <!-- <img src="/static/images/boss/icon_b_location.png" alt=""> -->
              <!-- <view>打卡成功！</view> -->
            <!-- </view> -->
          <!-- </view> -->
          <view class="dk-zc" :class="isRange==0&&dkway==1?'bzfw':''">
            <view class="zc-box">
              <!-- 打卡 -->
              <view @tap="clockInContinue()">
                <img class="img-pz" v-if="dkway==0" src="/static/images/boss/icon_b_face.png" alt="">
                <view class="dk-txt" :style="dkway!=0?'margin-top:30px;':''">{{ hasDayRecord==0?'上班打卡':nowRecordInfo.length>0?nowRecordInfo[0].begin?'下班打卡':'上班打卡':'' }}</view>
                <view class="dk-time-txt">{{ nowTime }}</view>
              </view>
              <!-- 打卡成功 -->
            </view>
          </view>
          <view class="p-cg" v-if="isRange==1">
            <img src="/static/images/boss/icon_b_location.png" alt="">
            <view>已進入考勤範圍</view>
          </view>
          <view class="p-cg-bz" v-if="isRange==0">
            <img src="/static/images/boss/icon_b_location_no.png" alt="">
            <view>不在考勤範圍内</view>
          </view>
        </view>
      </view>
			<view class="boss-con">
        <view class="row-p">
          <view class="r-p-l" @tap="handleWeekByMonth()">
            <block v-if="unitIndex==0">{{ currentDayList[0] }} {{ currentDayList[1] }}.{{ currentDayList[2] }}</block>
            <block v-if="unitIndex==1">{{ currentDayList[0] }} {{ chooseTypeMonthIndex }}</block>
            <block v-if="unitIndex==2">{{ currentDayList[0] }}</block>
          </view>
          <view class="r-p-r">
            <view v-for="(item,index) in unitList" :class="unitIndex==index?'active':''" :key="index" @tap="handleChangeUnit(item,index)">{{ item }}</view>
          </view>
        </view>
        <view class="row-illustrate" v-if="illustrateFlag">
          <img src="/static/images/boss/icon_b_close.png" mode="scaleToFill" alt="" @tap="illustrateFlag=false">
          <p>全天考勤正常{{ longitude }}--{{ latitude }}</p>
          <p>當天存在異常：遲到、早退、缺卡</p>
          <p>當天提交過：請假、加班、出差、外出、補卡</p>
        </view>
        <view class="box-dktj" v-if="unitIndex==0">
          <liu-calendar @change="getDate" :monthData="monthData" @checked="checkDate"></liu-calendar>
        </view>
        <boxMonth v-if="unitIndex==1" :month="chooseTypeMonthIndex"></boxMonth>
        <boxYear v-if="unitIndex==2" :year="currentDayList[0]"></boxYear>
        <view class="row-desc">
          <!-- <p>當日班次：固定上下班 部門名稱 09:0</p> -->
          <p>出勤統計：打卡{{nowRecordInfo.length>0?nowRecordInfo[0].begin&&nowRecordInfo[0].end?2:nowRecordInfo[0].begin?1:0:0}}次，工時8小時</p>
          <!-- 已经打卡 -->
          <block v-if="hasDayRecord==1">
            <view class="r-d-zt" v-if="false">
              <view class="rdzt-l"><img src="/static/images/boss/icon_b_qj.png" mode="scaleToFill" alt=""><view>已通過</view></view>
              <view class="rdzt-r"><view>已通過</view><img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt=""></view>
            </view>
            <view class="r-d-step" v-if="nowRecordInfo.length>0">
              <view class="step-li">
                <view>上班 {{ nowRecordInfo[0].begin }}
                  <text class="bj_y" v-if="nowRecordInfo[0].status_text_am=='遲到'||nowRecordInfo[0].status_text_am=='早退'||nowRecordInfo[0].status_text_am=='缺卡'">{{ nowRecordInfo[0].status_text_am }}</text>
                  <text class="bj_b" v-if="nowRecordInfo[0].status_text_am=='請假'||nowRecordInfo[0].status_text_am=='加班'||nowRecordInfo[0].status_text_am=='出差'||nowRecordInfo[0].status_text_am=='外出'||nowRecordInfo[0].status_text_am=='補卡'">{{ nowRecordInfo[0].status_text_am }}</text>
                </view>
                <view class="step-icon-li">
                  <img src="/static/images/boss/icon_b_location_no.png" mode="scaleToFill" alt="">
                  <view>{{ inviteInfo.company_name }}</view>
                </view>
              </view>
              <view class="step-li" v-if="nowRecordInfo[0].end">
                <view>下班 {{ nowRecordInfo[0].end }}
                  <text class="bj_y" v-if="nowRecordInfo[0].status_text_pm=='遲到'||nowRecordInfo[0].status_text_pm=='早退'||nowRecordInfo[0].status_text_pm=='缺卡'">{{ nowRecordInfo[0].status_text_pm }}</text>
                  <text class="bj_b" v-if="nowRecordInfo[0].status_text_pm=='請假'||nowRecordInfo[0].status_text_pm=='加班'||nowRecordInfo[0].status_text_pm=='出差'||nowRecordInfo[0].status_text_pm=='外出'||nowRecordInfo[0].status_text_pm=='補卡'">{{ nowRecordInfo[0].status_text_pm }}</text>
                </view>
                <view class="step-icon-li">
                  <img src="/static/images/boss/icon_b_location_no.png" mode="scaleToFill" alt="">
                  <view>{{ inviteInfo.company_name }}</view>
                </view>
              </view>
            </view>
          </block>
          <!-- 没有打卡 -->
          <block v-if="hasDayRecord==0">
            <view class="r-d-no-clock">
              <img src="/static/images/boss/icon_b_clock_no.png" mode="scaleToFill" alt="">
              <view>當天沒有打卡記錄</view>
            </view>
          </block>
        </view>
      </view>
      <view class="row-qj" @tap="handleQJ()">
        <view class="qj-l">
          <img src="/static/images/boss/icon_b_qj.png" mode="scaleToFill" alt=""><view>請假</view>
        </view>
        <view class="qj-r">
          <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
        </view>
      </view>
      <view class="row-qj" @tap="handleBG()">
        <view class="qj-l">
          <img src="/static/images/boss/icon_b_qj.png" mode="scaleToFill" alt=""><view>報告</view>
        </view>
        <view class="qj-r">
          <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
        </view>
      </view>
		</block>
		<!-- 未收到企业邀请 -->
		<view class="company-none" v-if="isHas==2">
			<img src="/static/images/boss/icon_b_company.png" mode="scaleToFill" alt="">
			<view>還未加入企業哦～</view>
		</view>
		<!-- 加入公司弹框 -->
		<uni-popup @maskClick="handleMind(0)" ref="joinPopup" type="center" border-radius="20" :mask-close-able="true" :mask="true">
      <view class="join_con">
        <view class="j-header">
          <view class="f-c-box">
            <view class="c-title margin-b-6">{{ inviteInfo.company_name }}</view>
            <view class="margin-b-10">邀請妳加入</view>
            <view class="margin-b-10">TA為妳設置的姓名/職稱</view>
            <view class="c-txt">{{ inviteInfo.realname }}-{{ inviteInfo.job_name }}</view>
          </view>
        </view>
        <view class="j-header-con">
          <view class="btn" @tap="handleMind(2)">忽略</view>
          <view class="btn btn-sure" @tap="handleMind(1)">同意加入</view>
        </view>
        <view class="j-footer-c"></view>
        <view class="j-footer-b">
          <view class="b-title margin-b-8">為妳設置考勤試用規則</view>
          <view class="b-cell margin-b-10">
            <view class="txt-l">考勤人員：</view>
            <view class="txt-r">{{ inviteInfo.realname||'暂无'  }}</view>
          </view>
          <view class="b-cell margin-b-10">
            <view class="txt-l">考勤時間：</view>
            <view class="txt-r">{{ inviteInfo.beginTime }}-{{ inviteInfo.endTime }}</view>
          </view>
          <view class="b-cell">
            <view class="txt-l">考勤地點：</view>
            <view class="txt-r">{{ inviteInfo.address||'暂无' }}</view>
          </view>
        </view>
      </view>
    </uni-popup>
	</view>
</template>
<script>
	import { attendanceInvite,attendanceJoin,attendanceGetaddress,attendanceList,attendanceSignup } from '../../utils/api'
  import {attendanceDaystatistics} from '../../utils/userApi'
	import bossNav from '../boss/components/boss-nav.vue'
  import wifi from './components/wifi.vue'
  import camera from './components/camera.vue';
  // import position from './components/position.vue';
  // import liuCalendar from '../../uni_modules/liu-calendar'
  import boxMonth from './components/boxMonth'
  import boxYear from './components/boxYear.vue'
import { min } from 'moment';
	let timer = null;
	export default {
		components: { bossNav, wifi, camera, boxMonth,boxYear },
		data() {
			return {
				isHas:0,//0无状态 1有邀请 2没有邀请 3接受邀请
				inviteInfo:{},
        currentDay:'',
        nowTime:'',
        currentDayList:[],
        unitIndex:0,
        unitList:['日','月','年'],
        illustrateFlag:true,
        currentTime:'',
        timer:null,
        dkState:2,//1上班打卡 2下班打卡 3打卡失敗 4打卡成功
        pointIndex:0,
        pointList:[],
        pointData:[],
        pointInfo:{},
        dkway:2,//0拍照打卡 2wifi打卡 1定位打卡
        hasDayRecord:1,//1有考勤记录 0没有考勤记录
        latitude:'',//22.5456562
        longitude:'',//113.9202499
        timer:null,
        nowRecordInfo:[],
        monthData:[],
        isRange:-1,
        chooseTypeMonthIndex:-1,
			}
		},
		filters:{
		},
		computed: {
		},
    onHide(){
      this.timer=null
    },
		onShow() {
      this.currentDay=this.$moment().format('YYYY-MM-DD')
      this.currentDayList=this.currentDay.split('-')
      this.chooseTypeMonthIndex=parseInt(this.currentDayList[1])
			this.hasInvite()
      this.timer=setInterval(() => {
        this.nowTime=`${this.$moment().format('HH:mm:ss')}`
      },1000)
      this.getNetworkInfo()
		},
		onHide() {
      this.timer=null
		},
		methods: {
      getNetworkInfo(){
        // const wifiName = require('wifi-name');
        // wifiName().then(name => {
        //   console.log(name)
        // })
      },
      getDate(e){
        if(e.value){
          let year=`${e.value.substring(0,4)}`
          let month=`${e.value.substring(5,7)}`
          this.getCurrentMonthKQ(year,month)
        }
      },
      //获取选中的日期
      checkDate(e){
        this.getAttendanceList(e.value,e.value)
      },
      handleChangeUnit(item,index){
        this.unitIndex=index
      },
      async getCurrentMonthKQ(year,month){
        let res=await attendanceDaystatistics({year:year,month:month})
        if(res.code==1){
          this.monthData=res.data
        }else{
          uni.showToast({
            icon:'none',
            title: '系統異常'
          })
        }
      },
      handleWeekByMonth(){
        let m_index=parseInt(this.$moment().format('MM')-1)
        let list=['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
        let arr=list.filter((v,index)=>index<=m_index)
        if(this.unitIndex==1){
          uni.showActionSheet({
            itemList: arr,
            title:'选择月份',
            success: ({ tapIndex }) => {
              this.chooseTypeMonthIndex=parseInt(tapIndex+1)
            },
            fail: (error) => {}
          })
        }
      },
      async clockInContinue(){
        if(this.dkway==0){//拍照上传
          this.photoImage()
        }else if(this.dkway==1){//定位打卡
          if(this.isRange==1){
            this.executeClockIn(1)
          }else{
            this.getCurrentPoint()
          }
        }else if(this.dkway==2){//wifi打卡
          uni.showToast({
            icon:'none',
            title: '敬请期待'
          })
        }
      },
      photoImage(){
        let that=this
        uni.chooseImage({
          // original 原图， compressed 压缩图，默认二者都有
          sizeType: ["original", "compressed"],
          // camera 使用相机，album 从相册中选图，默认二者都有
          sourceType: ["camera"],
          count:1,
          // success是必须要写的
          success: function (res) {
            const tempFiles = res.tempFiles
            const tempFilePaths = res.tempFilePaths
            uni.uploadFile({
              url: `${that.$imgUrl}/api/common/upload`,
              filePath: tempFilePaths[0],
              header: {
                token: uni.getStorageSync('token')
              },
              name: "file",
            }).then(res => {
              let data = JSON.parse(res.data)
              if(data.code==1){
                that.executeClockIn(0,data.data.fullurl)
              }else{
                uni.showToast({
                  icon:'none',
                  title: data.msg||'系統異常'
                })
              }
            })
          }
        })
      },
      async executeClockIn(type,url){
        console.log('类型=='+type)
        let obj={
          address_id:this.pointInfo.id,
          type:this.pointInfo.clock_type,
        }
        if(type==0){
          obj.pic=url
        }else if(type==1){
          obj.lng=this.longitude
          obj.lat=this.latitude
        }else if(type==2){
          obj.wifi_mac=''
          obj.wifi_ip=''
        }
        let res=await attendanceSignup(obj)
        if(res.code==1){
          let currentDay=this.$moment().format('YYYY-MM-DD');
          this.getAttendanceList(currentDay,currentDay)
          console.log('999')
        }else{
          uni.showToast({
            icon:'none',
            title: res.msg||'系統異常'
          });
        }
      },
      async getAttendanceList(begin,end){
        let res=await attendanceList({begin:begin,end:end})
        if(res.code==1){
          if(res.data){//有考勤记录
            this.hasDayRecord=1
            this.nowRecordInfo=res.data
          }else{//没有考勤记录
            this.hasDayRecord=0
            this.nowRecordInfo=[]
          }
        }else{
          uni.showToast({
            icon:'none',
            title: res.msg||'系統異常'
          });
        }
      },
      async getAddress(){//获取打卡地点
        let res=await attendanceGetaddress({})
        if(res.code==1){
          this.pointData=res.data
          this.pointList=res.data.map(v=>{
            return v.address
          })
          this.pointInfo=this.pointData[this.pointIndex]
          this.dkway=this.pointInfo.clock_type
          if(this.dkway==2){//wifi打卡
            this.checkWifiSignal()
          }else if(this.dkway==1){//位置打卡
            this.getCurrentPoint()
          }
        }else{
          uni.showToast({
            icon:'none',
            title: res.msg||'系統異常'
          });
        }
      },
      async computedDistance(){
        let that=this
        let res=await attendanceSignup({pre:1,lat:that.latitude,lng:that.longitude,type:1,address_id:that.pointData[that.pointIndex].id})
        if(res.code==1){
          this.isRange=1
        }else{
          this.isRange=0
        }
      },
      // 选择打卡点
      changePoint(){
        let that=this
        uni.showActionSheet({
          title:'請選擇打卡點',
          itemColor:'#333333',
          itemList: that.pointList,
          success: ({ tapIndex }) => {
            that.pointIndex=tapIndex
            that.pointInfo=that.pointData[tapIndex]
            that.dkway=that.pointInfo.clock_type
            if(that.dkway==2){
              that.checkWifiSignal()
            }else if(this.dkway==1){//位置打卡
              this.getCurrentPoint()
            }
          },
          fail: (error) => {}
        })
      },
      checkWifiSignal() {
        let wifi = require('node-wifi');
        wifi.init({
          iface: '玖星_5G' // 替换为你的WiFi接口名称
        });
        return info;
      },
      getCurrentPoint(){
        let that=this
        
        uni.request({
          method: 'GET',
          url: 'https://restapi.amap.com/v3/ip',
          data: {
            key: '584a1b1cf5b6a322b977834b3c93aaaf',
            output: 'JSON'
          },
          success: async (res) => {
            let rectangle = res.data.rectangle
            let pointsStr = rectangle.split(';')[0]
            let pointArr=pointsStr.split(',')
            that.latitude = pointArr[1] // 纬度
            that.longitude = pointArr[0] // 经度
            this.computedDistance()
          },
          fail: r => {
            console.log(r);
          }
        });
      },
      handleQJ(){
        uni.navigateTo({ url: '/pages/boss/leave'});
      },
      handleBG(){
        uni.setStorageSync('signImgUrl','')
        uni.navigateTo({ url: '/pages/boss/workReport'});
      },
			async handleMind(type){//0无状态 1不同意 2同意
        let that=this
				let res = await attendanceJoin({status:type,invite_id:that.inviteInfo.id})
				if(res.code==1){
					if(type==1){
						that.isHas=3
					}else{
						that.isHas=2
					}
					that.$refs.joinPopup.close()
				}else{
					uni.showToast({
						icon:'none',
						title: res.msg||'系統異常'
					});
				}
			},
			async hasInvite(){
        let that=this
				let res = await attendanceInvite({})
				if(res.code==1){
          if(res.data){
            that.inviteInfo=res.data
            that.inviteInfo.beginTime=res.data.rule.begin.substring(0,5)
            that.inviteInfo.endTime=res.data.rule.end.substring(0,5)
            if(res.data.status==1){//0无状态 1接受邀请 2忽略
              that.isHas=3
              // that.timer=setInterval(() => {
              //   that.currentTime=new Date().toLocaleString().split(' ')[1];
              // }, 1000);
              that.getAddress()
              let currentDay=this.$moment().format('YYYY-MM-DD');
              that.getAttendanceList(currentDay,currentDay)
            }else{
              that.isHas=1
              that.$refs.joinPopup.open()
            }
          }else{
            that.isHas=2
            uni.showToast({
              icon:'none',
              title: res.msg||'系統異常'
            });
          }
				}else{
          that.isHas=2
					uni.showToast({
						icon:'none',
						title: res.msg||'系統異常'
					})
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
.page_box{
  width: 100vw;
	height: calc(100vh -  50px);
  overflow-y: scroll;
  background: #F4F6FA;
}
.company-none{
	width: 140px;
	font-size: 15px;
	color: #768396;
	line-height: 21px;
	margin: 170px auto 0;
	text-align: center;
	img{
		width: 140px;
		height: 100px;
		margin-bottom: 10px;
	}
}

.join_con{
	width: 350px;
	height: 365px;
}
.j-header{
  width: 100%;
  height: 132px;
  background-image: url('/static/images/boss/icon_b_popup_h.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.j-header-con{
  width: 324px;
  background: #F0F4F9;
  height: 68px;
  margin: 0 10px 0 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  .btn{
    width: 143px;
    text-align: center;
    line-height: 44px;
    font-weight: 500;
    font-size: 15px;
    height: 44px;
    color: #fff;
    background: linear-gradient( 90deg, #016CF1 0%, #0697F6 100%);
    border-radius: 8px;
  }
  .btn:first-child{
    margin-right: 9px;
    background: #fff;
    color: #1C7AF7;
    border: 1px solid #1C7AF7;
  }
}
.j-footer-c{
  width: 324px;
  height: 44px;
  background-image: url('/static/images/boss/icon_b_popup_c.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0 10px 0 16px;
}
.j-footer-b{
  width: 324px;
  height: 121px;
  margin: 0 10px 0 16px;
  padding: 0 15px;
  background: #fff;
  border-radius: 0 0 20px 20px;
}
.b-title{
  text-align: center;
  font-weight: 500;
  font-size: 15px;
  color: #333333;
  line-height: 21px;
}
.b-cell{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.txt-l{
  width: 70px;
  height: 20px;
  font-size: 14px;
  color: #666666;
  line-height: 20px;
}
.txt-r{
  width: calc(1005 - 70px);
  height: 20px;
  font-weight: 500;
  font-size: 14px;
  color: #0066ED;
  line-height: 20px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}
.margin-b-10{
  margin-bottom: 10px;
}
.margin-b-8{
  margin-bottom: 8px;
}
.margin-b-6{
  margin-bottom: 6px;
}
.f-c-box{
  width: 324px;
  padding: 10px 0 0;
  margin: 0 0 0 16px;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  text-align: center;
}
.c-title{
  width: 100%;
  height: 28px;
  font-weight: 600;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
  color: transparent;
  background: linear-gradient(0deg, #0272F2 0%, #0DC6FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.c-txt{
  color: #0066ED;
  font-weight: 500;
}
// 考勤部分
.boss-con{
  width: calc(100% - 20px);
  border-radius: 10px;
  background: #fff;
  margin: 10px auto 10px;
  padding: 10px 10px 0;
}
.row-p{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.r-p-l{
  width: 50%;
}
.r-p-r{
  width: 124px;
  background: #EFF2F9;
  border-radius: 6px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: 15px;
  color: #333333;
  line-height: 32px;
  view{
    width: 40px;
    height: 28px;
    text-align: center;
    font-size: 15px;
    color: #333333;
    line-height: 28px;
    border-radius: 6px;
  }
  view.active{
    background: #fff;
  }
}
.row-illustrate{
  margin: 10px 0;
  border-radius: 6px;
  background: #F4F6FA;
  font-size: 13px;
  color: #666666;
  line-height: 18px;
  padding: 10px 21px;
  position: relative;
  img{
    width: 15px;
    height: 15px;
    position: absolute;
    top: 5px;
    right: 5px;
  }
  p{
    position: relative;
  }
  p::after{
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    left: -10px;
    top: 6px;
    background: #B4B4B4;
  }
  p:nth-child(2)::after{
    background: #1C7AF7;
  }
  p:nth-child(3)::after{
    background: #FF933E;
  }
  p:nth-child(3){
    margin: 5px 0;
  }
}
.row-desc{
  font-size: 13px;
  color: #666666;
  line-height: 18px;
  padding: 14px 0 10px;
  p:first-child{
    padding-bottom: 5px;
  }
}
.r-d-zt{
  width: calc(100% - 22px);
  padding: 0 10px;
  height: 46px;
  background: #FFFFFF;
  border-radius: 6px;
  border: 1px solid #E2E2E2;
  margin: 15px 0 0;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  &>view{
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img{
      width: 30px;
      height: 30px;
    }
    view{
      margin-left: 10px;
    }
  }
  &>view:last-child{
    justify-content: flex-end;
    view{
      margin-right: 5px;
    }
    img{
      width: 6px;
      height: 10px;
    }
  }
}
.step-li{
  padding-left: 20px;
  font-weight: 500;
  font-size: 15px;
  color: #333333;
  line-height: 21px;
  margin-top: 10px;
  position: relative;
}
.step-li::after{
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1C7AF7;
  position: absolute;
  top: 6px;
  left: 6px;
}
.step-icon-li{
  font-size: 13px;
  color: #999;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 5px;
  img{
    display: block;
    width: 13px;
    height: 15px;
    margin-right: 6px;
  }
}
.r-d-no-clock{
  width: 140px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 13px;
  color: #768396;
  line-height: 18px;
  img{
    width: 100%;
    height: 110px;
  }
}
.row-qj{
  width: calc(100% - 20px);
  background: #fff;
  border-radius: 10px;
  padding: 11px 10px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .qj-l{
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    color: #333333;
    line-height: 22px;
    img{
      width: 35px;
      height: 35px;
      margin-right: 10px;
    }
  }
  .qj-r{
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    img{
      width: 6px;
      height: 10px;
    }
  }
}
.boss-top-con{
  width: calc(100% - 20px);
  border-radius: 10px;
  background: #fff;
  margin: 10px auto 0;
  padding: 10px;
}
.b-c-cell{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.b-c-item{
  width: calc(50% - 25px);
  padding: 10px;
  background: #EFF2F9;
  border-radius: 10px;
}
.c-i-o{
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  margin-bottom: 6px;
}
.c-i-b{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 13px;
  color: #666666;
  line-height: 18px;
  img{
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
}
.b-c-sel{
  width: 100%;
  margin: 16px 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 14px;
  color: #333333;
  line-height: 20px;
  img{
    width: 11px;
    height: 6px;
    margin-left: 10px;
  }
}
.b-c-clock{
  width: 100%;
  height: 173px;
}
.clock-in-box{
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px solid #1C7AF7;
  &>view{
    margin: 7px auto 0;
    border-radius: 50%;
    width: 106px;
    height: 106px;
    border-top: 1px solid transparent;
    background: linear-gradient( 180deg, #02B4F2 0%, #1C7AF7 100%);
    text-align: center;
    img{
      width: 20px;
      height: 20px;
      margin: 14px auto 2px;
    }
    img.dkcg{
      width: 39px;
      height: 46px;
      margin: 30px auto;
    }
    .c-i-b-t{
      font-weight: 500;
      font-size: 18px;
      color: #FFFFFF;
      line-height: 26px;
    }
    .c-i-b-b{
      font-weight: 500;
      font-size: 15px;
      color: rgba(255,255,255,0.5);
      line-height: 22px;
    }
  }
}
// 迟到
.clock-in-box.chidao{
  border: 2px solid #FF9845;
  &>view{
    background: linear-gradient( 180deg, #FF9A4A 0%, #FF7F0F 100%);
  }
}
// 没连接wifi
.clock-in-box.wifi{
  border: 2px solid #A2ADBA;
  &>view{
    background: #A2ADBA;
  }
}
.clock-i-txt{
  font-size: 13px;
  color: #0066ED;
  line-height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  img{
    width: 13px;
    height: 15px;
    margin-right: 5px;
  }
  .txt-gray{
    color: #A2ADBA;
  }
}
.dksb{
  img.img-dksb{
    width: 120px;
    height: 120px;
    display: block;
    margin: 0 auto 20px;
  }
  .p-sb{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: #666666;
    line-height: 18px;
    img{
      width: 13px;
      height: 15px;
      display: block;
      margin-right: 5px;
    }
  }
}
.dkcg{}
.p-cg{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: #0066ED;
  line-height: 18px;
  img{
    width: 13px;
    height: 15px;
    display: block;
    margin-right: 5px;
  }
}
.p-cg-bz{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: #A2ADBA;
  line-height: 18px;
  img{
    width: 13px;
    height: 15px;
    display: block;
    margin-right: 5px;
  }
}
.box-cg{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 2px solid #1C7AF7;
  margin: 0 auto 20px;
  position: relative;
}
.inline-cg{
  width: 106px;
  height: 106px;
  border-radius: 50%;
  position: absolute;
  top: 7px;
  left: 7px;
  background: linear-gradient( 180deg, #02B4F2 0%, #1C7AF7 100%);
  img{
    width: 40px;
    height: 46px;
    margin: 30px auto 0;
    display: block;
  }
}
.wfdk{
}
.dk-zc{
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px solid #1C7AF7;
}
.bzfw.dk-zc{
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  border: 2px solid #A2ADBA;
}
.zc-box{
  margin: 5px auto 0;
  border-radius: 50%;
  width: 106px;
  height: 106px;
  border-top: 1px solid transparent;
  background: linear-gradient( 180deg, #02B4F2 0%, #1C7AF7 100%);
  text-align: center;
}
.bzfw.dk-zc .zc-box{
  margin: 5px auto 0;
  border-radius: 50%;
  width: 106px;
  height: 106px;
  border-top: 1px solid transparent;
  background: #A2ADBA;
  text-align: center;
}
img.img-pz{
  width: 20px;
  height: 20px;
  margin:16px auto 5px;
}
.dk-txt{
  height: 25px;
  font-weight: 500;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 25px;
  text-align: center;
}
.dk-time-txt{
  font-weight: 500;
  font-size: 15px;
  color: #FFFFFF;
  line-height: 21px;
  text-align: center;
  opacity: 0.5;
}
.box-dktj{
}
.bj_y{
  width: 28px;
  height: 18px;
  line-height: 18px;
  border-radius: 4px;
  text-align: center;
  font-size: 11px;
  color: #1C7AF7;
  border: 1px solid #1C7AF7;
  margin-left: 12px;
  display: inline-block;
}
.bj_y{
  width: 28px;
  height: 18px;
  border-radius: 4px;
  text-align: center;
  font-size: 11px;
  line-height: 18px;
  color: #FF933E;
  border: 1px solid #FF933E;
  margin-left: 12px;
  display: inline-block;
}
</style>
